<template>
	<view class="register-page">
		<status-bar></status-bar>
		<!-- 顶部蓝色背景栏 -->
		<view class="register-topbar">
			<view class="back-btn" @click="goBack">
				< </view>
					<text class="header-title">注册</text>
			</view>
			<!-- 步骤一：手机号和验证码 -->
			<view v-if="step === 1" class="register-form">
				<view class="input-group">
					<view class="input-row flex align-center">
						<view class="iconfont icon-user icon"></view>
						<input v-model="registerForm.mobile" class="input" type="text" placeholder="请输入手机号"
							maxlength="11" />
						<button class="sms-btn" :disabled="smsTimer > 0" @click="getSmsCode">
							{{ smsTimer > 0 ? smsTimer + '秒后可重发' : '获取验证码' }}
						</button>
						<view v-if="registerForm.mobile" class="input-clear" style="margin-right: 180rpx;"
							@click="registerForm.mobile=''">×</view>
					</view>
					<view class="input-row flex align-center">
						<view class="iconfont icon-code icon"></view>
						<input v-model="registerForm.code" class="input" type="text" placeholder="请输入验证码"
							maxlength="6" />

						<view v-if="registerForm.code" class="input-clear" @click="registerForm.code=''">×</view>
					</view>
				</view>
				<view class="form-bottom">
					<button class="register-btn" @click="goNext">下一步</button>
				</view>
			</view>
			<!-- 步骤二：设置密码 -->
			<view v-else class="register-form">
				<view class="form-row">
					<text class="form-label">登录密码：</text>
					<input v-model="registerForm.password" type="password" class="form-input" placeholder="请输入密码"
						maxlength="20" />
					<text v-if="passwordStrength" class="pwd-strength">{{ passwordStrength }}</text>
				</view>
				<view class="divider"></view>
				<view class="form-row">
					<text class="form-label">确认密码：</text>
					<input v-model="registerForm.confirmPassword" type="password" class="form-input"
						placeholder="请输入重复密码" maxlength="20" />
				</view>
				<view class="divider"></view>
				<!-- 协议 -->
				<view class="agreement-row">
					<view @click="changeAgree" :class="agree?`agreement-checkbox-checked`:`agreement-checkbox`"/>		
					<text class="agreement-text">我已同意</text>
					<text class="agreement-link" @click="openAgreement">《指尖帮使用协议和服务条款》</text>
				</view>
				<view class="form-bottom">
					<button class="register-btn" @click="handleRegister">确认注册</button>
				</view>
			</view>
		</view>
</template>

<script>
	import user from '../store/modules/user';

	export default {
		data() {
			return {
				step: 1,
				smsTimer: 0,
				smsTimerId: null,
				registerForm: {
					mobile: '',
					code: '',
					password: '',
					confirmPassword: ''
				},
				agree: false
			}
		},
		computed: {
			passwordStrength() {
				const pwd = this.registerForm.password
				if (!pwd) return ''
				if (pwd.length < 6) return '弱'
				const hasLetter = /[a-zA-Z]/.test(pwd)
				const hasNumber = /\d/.test(pwd)
				const hasSpecial = /[^a-zA-Z\d]/.test(pwd)
				if (hasLetter && hasNumber && hasSpecial) {
					return '强'
				} else if (
					(hasLetter && hasNumber && !hasSpecial) ||
					(hasLetter && !hasNumber && hasSpecial) ||
					(!hasLetter && hasNumber && hasSpecial)
				) {
					return '中'
				} else {
					return '弱'
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			openAgreement() {
				uni.navigateTo({
					url: '/pages/agreement'
				})
			},
			async getSmsCode() {
				if (!this.registerForm.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				try {
					uni.showLoading({
						title: '请求中'
					})
					const res = await user.actions.RegisterPhoneCode(this.registerForm.mobile)
					if (res.code == 200) {
						this.smsTimer = 60
						this.smsTimerId = setInterval(() => {
							this.smsTimer--
							if (this.smsTimer <= 0) {
								clearInterval(this.smsTimerId)
								this.smsTimerId = null
							}
						}, 1000)
						uni.showToast({
							title: '验证码已发送',
							icon: 'success'
						})
					}
				} catch (error) {
					console.error(error)
				} finally {
					uni.hideLoading()
				}

			},
			async goNext() {
				if (!this.registerForm.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!this.registerForm.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				try {
					uni.showLoading({
						title: '请求中'
					})
					const res = await user.actions.RegisterPhoneCodeVerify(this.registerForm.mobile, this.registerForm
						.code)
					if (res.code == 200) {
						this.step = 2
					}
				} catch (error) {
					console.error(error)
				} finally {
					uni.hideLoading()
				}
			},
			async handleRegister() {
				if (!this.registerForm.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				if (!this.registerForm.confirmPassword) {
					uni.showToast({
						title: '请再次输入密码',
						icon: 'none'
					})
					return
				}
				if (this.registerForm.password !== this.registerForm.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					})
					return
				}
				if (!this.agree) {
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					})
					return
				}
				try {
					uni.showLoading({
						title: '请求中'
					})
					const res = await user.actions.RegisterPhone(this.registerForm.mobile, this.registerForm.password)
					if (res.code == 200) {
						uni.showToast({
							title: '注册成功',
							icon: 'success'
						})
						uni.switchTab({ url: '/pages/index/index' });
					}
				} catch (error) {
					console.error(error)
				} finally {
					uni.hideLoading()
				}
			},
			changeAgree() {
				this.agree = !this.agree
			}
		},
		beforeDestroy() {
			if (this.smsTimerId) {
				clearInterval(this.smsTimerId)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-page {
		background: #f8f8f8;
		min-height: 100vh;
	}

	.register-topbar {
		background: #1890ff;
		height: 100rpx;
		display: flex;
		align-items: center;
		position: relative;

		.back-btn {
			color: white;
			width: 40rpx;
			height: 40rpx;
			margin-left: 20rpx;
			background: url('data:image/svg+xml;utf8,<svg ...>') no-repeat center/contain;
		}

		.header-title {
			flex: 1;
			text-align: center;
			color: #fff;
			font-size: 36rpx;
			font-weight: bold;
			margin-right: 40rpx;
		}
	}

	.register-form {
		background: #fff;
		margin: 40rpx 30rpx 0 30rpx;
		border-radius: 16rpx;
		padding: 40rpx 30rpx 30rpx 30rpx;

		.form-row {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
			position: relative;

			.icon {
				font-size: 38rpx;
				color: #999;
				margin-right: 10rpx;
			}

			.form-label {
				font-size: 30rpx;
				color: #222;
				font-weight: bold;
				width: 180rpx;
				text-align: right;
			}

			.form-input {
				flex: 1;
				font-size: 30rpx;
				border: none;
				background: transparent;
				padding: 0 10rpx;
				height: 60rpx;
				line-height: 60rpx;
			}

			.center-input {
				text-align: left;
				font-size: 36rpx;
				color: #222;
				font-weight: 500;
				padding-left: 0;
			}

			.pwd-strength {
				color: #ff3b30;
				font-size: 28rpx;
				margin-left: 20rpx;
				font-weight: bold;
			}

			.code-btn {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #f0f1f2;
				color: #bbb;
				font-size: 26rpx;
				border: none;
				border-radius: 8rpx;
				padding: 0 20rpx;
				height: 48rpx;
				line-height: 48rpx;
			}
		}

		.divider {
			height: 2rpx;
			background: #eee;
			margin: 0 0 20rpx 0;
		}

		.agreement-row {
			display: flex;
			align-items: center;
			margin: 30rpx 0 40rpx 30rpx;

			.agreement-checkbox {
				width: 25rpx;
				height: 25rpx;
				margin-right: 10rpx;				
				border: 1px solid #95a5a6;
				border-radius: 50%;
			}
			
			.agreement-checkbox-checked {
				width: 25rpx;
				height: 25rpx;
				margin-right: 10rpx;				
				background-color: #1879FF;
				border-radius: 50%;				
			}

			.agreement-text {
				color: #888;
				font-size: 28rpx;
			}

			.agreement-link {
				color: #1890ff;
				font-size: 28rpx;
				margin-left: 8rpx;
			}
		}

		.form-bottom {
			margin-top: 60rpx;
			display: flex;
			justify-content: center;
		}

		.register-btn {
			width: 80%;
			height: 80rpx;
			background: #1890ff;
			color: #fff;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 10rpx;
		}
	}

	.input-group {
		background: #fff;
		border-radius: 20rpx;
		padding: 10rpx 0;

		.input-row {
			margin: 20rpx 0;
			background: #f5f6f7;
			border-radius: 20rpx;
			height: 90rpx;
			padding: 0 20rpx;
			position: relative;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f0f1f2;

			&:last-child {
				border-bottom: none;
			}

			.icon {
				font-size: 38rpx;
				color: #999;
				margin-right: 10rpx;
			}

			.input {
				flex: 1;
				font-size: 30rpx;
				background: transparent;
				border: none;
				outline: none;
			}

			.input-clear {
				font-size: 36rpx;
				color: #bbb;
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 2;
			}

			.sms-btn {
				background: none;
				color: #1890ff;
				font-size: 28rpx;
				border: none;
				padding: 0 10rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}
</style>